<template>
  <div class="evaluate">
    <span class="e1"></span>
    <span class="e2" :style="{ width: evaluate * 10 + '%' }"></span>
    <span class="e3"></span>
  </div>
</template>

<script>
export default {
  name: 'Evaluate',
  props: {
    evaluate: {
      type: Number,
      default: 10,
    },
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.evaluate {
  width: 16px * 5;
  height: 16px;
  position: relative;
  span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .e1 {
    background-image: url('@/assets/commstar.png');
    background-size: auto 200%;
  }
  .e2 {
    background-image: url('@/assets/commstar.png');
    background-size: auto 200%;
    background-position-y: 16px;
  }
}
</style>
